<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title> webrtc test  </title>
<style type="text/css">
	.room {
		cursor: pointer;
	}
	div.select {
      display: inline-block;
      margin: 0 0 1em 0;
    }
</style>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<script type='text/javascript'>

    window.localStorage.setItem('debug', '*');
    let container;
    var socket;
    function addVideoForStream(stream,muted)
    {
        //Create new video element
        const video = document.createElement("video");
        //Set same id
        video.id = stream.id;
        video.width = 320;
        video.height = 240;
        //Set src stream
        video.srcObject = stream;
        //Set other properties
        video.autoplay = true;
        video.muted = muted;
        //Append it
        container.appendChild(video);
    }
    
    function removeVideoForStream(stream)
    {
        //Get video
        var video = document.getElementById(stream.id);
        //Remove it when done
        video.addEventListener('webkitTransitionEnd',function(){
                //Delete it
            video.parentElement.removeChild(video);
        });
        //Disable it first
        video.className = "disabled";
    }
    function connect() 
    {
        container = document.getElementById('container');

        var pc = new RTCPeerConnection();
        
        pc.onaddstream = function(event) {
            console.debug("pc::onAddStream",event);
            // Add The recording video
            addVideoForStream(event.stream);
        };
        
        pc.onremovestream = function(event) {
            console.debug("pc::onRemoveStream",event);
            //Play it
            removeVideoForStream(event.stream);
        };
        socket = new WebSocket('ws://localhost:8000/channel');
        socket.onopen = async () => {
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            });
            console.debug("md::getUserMedia sucess",stream);
            // Add LocalVideo 
            addVideoForStream(stream,true);

            // we add stream later 
            pc.addStream(stream);
            //Create new offer
            const offer = await pc.createOffer({
                offerToReceiveAudio: true,
                offerToReceiveVideo: true
            });
            //Set it
            pc.setLocalDescription(offer);
            console.log("offer ==== ",offer.sdp);
            socket.send(JSON.stringify({
                cmd: 'offer',
                sdp: offer.sdp
            }));
        };

        socket.onmessage  = async (event) =>{
            var data = JSON.parse(event.data);
            console.log(data);

            if (data.sdp) {
                //Create answer
                const answer = new RTCSessionDescription({
                    type	:'answer',
                    sdp	: data.sdp
                }); 
                console.debug(answer.sdp);
                await pc.setRemoteDescription(answer); 
            }
        };
    }

</script>

</head>
<body onload="connect();">
	<h1>MediaServer  Demo</h1>
	<br/>

	<div id="conference">
		videos:
		<br />
		<div id="container"></div>
	</div>
</body>


</html>